<template>
  <!--  固定的底部-->
  <div class="bottom">
    <!--    底部的icon图标按钮-->
    <div class="bottom-icon">
      <!--      home按钮-->
      <!--      <router-link class="home" tag="div" to="/">-->

      <!--        <van-icon name="wap-home-o"/>-->

      <!--      </router-link>-->
      <van-tabbar active-color="red" route>
        <van-tabbar-item icon="home-o" replace to="/index">
          主页
        </van-tabbar-item>
        <van-tabbar-item icon="search" replace to="/search">
          搜索
        </van-tabbar-item>
        <van-tabbar-item icon="plus" replace to="/post">
            发帖
        </van-tabbar-item>
        <van-tabbar-item icon="more-o" replace to="/about">
          与我相关
        </van-tabbar-item>
        <van-tabbar-item icon="user-circle-o" replace to="/mine">
          我
        </van-tabbar-item>

      </van-tabbar>
      <!--      搜索按钮-->
      <router-link tag="div" to="search">
        <van-icon name="search"/>
      </router-link>
      <!--      发表评论按钮-->
      <router-link tag="div" to="post">
        <van-icon name="plus"/>
      </router-link>
      <!--        与我有关按钮-->

      <router-link tag="div" to="about">
        <van-icon name="more-o"/>

      </router-link>
      <!--      我的按钮-->
      <router-link tag="div" to="mine">
        <van-icon name="user-circle-o"/>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "bottom",

  methods: {}
}
</script>

<style lang="less" scoped>
.bottom {
  width: 100%;
  position: fixed;
  bottom: 0;

}

.bottom-icon {
  display: flex;
  justify-content: space-around;
  flex-wrap: nowrap;
  justify-items: center;
  font-size: 40px;
  background-color: #FAFAFA;

  div {
    display: flex;
    align-items: center;
  }

  //.bottom-icon {
  //  transition: all 0.8s ease;
  //}

  .home:hover {
    color: red;
    transform: scale(1.05);
  }

  .search:hover {
    color: red;
    transform: scale(1.05);
  }

  .post:hover {
    color: red;
    transform: scale(1.05);
  }

  .mine:hover {
    color: red;
    transform: scale(1.05);
  }

  .about:hover {
    color: red;
    transform: scale(1.05);
  }
}

</style>